$(function(){
	//var form_code = '<form id="fileform" action="UserIconSaverServlet"><input id="iconfile" type="file" name="icon"></form>';
	
	/*
	 * form 默认的 enctype 是 application/x-www-form-urlencoded
	 * 上传文件要改成 multipart/form-data
	 */
	var form_code = [
		'<form id="fileform" method="post" enctype="multipart/form-data" action="UserIconSaverServlet">' , 
		'<input id="iconfile" type="file" name="icon">' , 
		'</form>' 
	].join("");
	
	$("#userIcon").on("click" , function(){
		var iframe = document.getElementById("uploader");
		
		// iframe 元素内使用问外部不同的 文档对象，可以通过 contentDocument 获得
		// 获得的 contentDocument 属性拥有个主页面 document 相同的接口方法
		iframe.contentDocument.body.innerHTML = form_code;
		
		var fileform = iframe.contentDocument.getElementById("fileform");
		var iconfile = iframe.contentDocument.getElementById("iconfile");
		
		$(iframe).on("load" , function(){
			// iframe 内部也使用和主页面不同的 window 对象，可以通过 contentWindow 获得
			// Servlet 响应的是一个完成的 HTML 页面，其中生成的 JSON 字符串 作为变量 response 的值
			// js 中全局变量都保存在 window 对象下，可以通过 window.全局变量名 过去
			// 对于 iframe 则要先获取 iframe 自己的 window 对象，在用相同的方法访问
			var iframe_response = iframe.contentWindow.response;
			
			// 将新路径设置到 img 元素，用于展现给用户预览
			$("#userIcon").attr("src" , iframe_response.url);
			
			// 将新路径设置到 hidden 元素，用于表单提交
			$("#icon").val(iframe_response.url);
		});
		
		// 监听 file 的 onchange 事件，如果该事件被触发
		// 说明用户选择了一个新的图片，则提交该表单至后台
		$(iconfile).on("change" , function(){
			fileform.submit();
		})
		
		// 利用 jquery 模拟触发 file型input 的点击事件
		// file click 事件被触发是，浏览器会弹出文件选择对话框
		// 如果用户选择了与 file value属性不同路径的文件
		// 就会触发 file的 onchange 事件
		$(iconfile).trigger("click");
	});
});